<template>
  <div class="bar">
    <div class="left-icon-con">
      <a href="javascript:" class="close bar-icon" @click="closecb"></a>
      <a href="javascript:" class="scale bar-icon" @click="scalecb"></a>
    </div>
    <div class="right-icon-con">
      <a href="javascript:" class="handle bar-icon" @click="handlecb"></a>
    </div>
    <p class="title">{{title}}</p>
  </div>
</template>

<script>
export default {
  props: ['nativeClose', 'nativeHandle', 'navtiveScale', 'title'],
  methods: {
    closecb() {
      if (typeof this.nativeClose === 'function') this.nativeClose();
    },
    handlecb() {
      if (typeof this.nativeHandle === 'function') this.nativeHandle();
    },
    scalecb() {
      if (typeof this.navtiveScale === 'function') this.navtiveScale();
    }
  }
}
</script>
<style lang="scss" scoped>
  
  .bar{
    height: 30px;
    background-color: #282c37;
    .title{
      margin: 0 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      line-height: 30px;
      font-size: 14px;
      text-align: center;
    }
    .left-icon-con{
      float: left;
      .bar-icon{
        float: left;
        margin: 9px 0 0 12px;
      }
    }
    .right-icon-con{
      float: right;
      .bar-icon{
        float: right;
        margin: 9px 12px 0 0;
      }
    }
    .bar-icon{
      width: 12px;
      height: 12px;
      line-height: 12px;
      border-radius: 50%;
      text-align: center;
      text-decoration: none;
      background-color: #c1c1c1;
    }
    .close{
      background-color: rgba(255, 86, 79, 1);
    }
    .scale{
      background-color: rgba(33, 197, 53, 1);
    }
    .handle{
      display: none;
      background-color: #4486f7;
    }
  }
  @media screen and (max-width: 1366px) {
    .bar{
      height: 50px;
      .left-icon-con{
        .bar-icon{
          margin: 15px 0 0 15px;
        }
      }
      .right-icon-con{
        .bar-icon{
          margin: 15px 15px 0 0;
        }
      }
      .bar-icon{
        width: 20px;
        height: 20px;
        line-height: 20px;
      }
      .title{
        line-height: 50px;
      }
      .handle{
        display: block;
      }
    }
  }
</style>
